<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>学生成绩管理系统</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        :root {
            --primary: #3498db;
            --primary-dark: #2980b9;
            --secondary: #2c3e50;
            --success: #2ecc71;
            --danger: #e74c3c;
            --light: #ecf0f1;
            --dark: #34495e;
            --gray: #95a5a6;
            --shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            --border-radius: 8px;
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }

        body {
            background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
            min-height: 100vh;
            padding: 20px;
            color: var(--dark);
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
        }

        header {
            text-align: center;
            margin-bottom: 30px;
            padding: 20px;
        }

        h1 {
            color: var(--secondary);
            margin-bottom: 10px;
            font-size: 2.5rem;
        }

        .subtitle {
            color: var(--primary-dark);
            font-size: 1.2rem;
            max-width: 800px;
            margin: 0 auto;
            line-height: 1.6;
        }

        .card {
            background: white;
            border-radius: var(--border-radius);
            box-shadow: var(--shadow);
            padding: 25px;
            margin-bottom: 30px;
            transition: transform 0.3s ease;
        }

        .card:hover {
            transform: translateY(-5px);
        }

        .card-title {
            font-size: 1.5rem;
            color: var(--secondary);
            margin-bottom: 20px;
            padding-bottom: 10px;
            border-bottom: 2px solid var(--light);
            display: flex;
            align-items: center;
        }

        .card-title i {
            margin-right: 10px;
            color: var(--primary);
        }

        .form-group {
            margin-bottom: 20px;
        }

        label {
            display: block;
            margin-bottom: 8px;
            font-weight: 600;
            color: var(--dark);
        }

        input, select {
            width: 100%;
            padding: 12px 15px;
            border: 2px solid #e0e0e0;
            border-radius: var(--border-radius);
            font-size: 1rem;
            transition: border 0.3s ease;
        }

        input:focus, select:focus {
            border-color: var(--primary);
            outline: none;
        }

        .btn {
            padding: 12px 25px;
            border: none;
            border-radius: var(--border-radius);
            cursor: pointer;
            font-size: 1rem;
            font-weight: 600;
            transition: all 0.3s ease;
            display: inline-flex;
            align-items: center;
            justify-content: center;
        }

        .btn i {
            margin-right: 8px;
        }

        .btn-primary {
            background: var(--primary);
            color: white;
        }

        .btn-primary:hover {
            background: var(--primary-dark);
        }

        .btn-danger {
            background: var(--danger);
            color: white;
        }

        .btn-danger:hover {
            background: #c0392b;
        }

        .btn-success {
            background: var(--success);
            color: white;
        }

        .btn-success:hover {
            background: #27ae60;
        }

        .grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 30px;
        }

        .controls {
            display: flex;
            justify-content: space-between;
            margin-bottom: 20px;
            flex-wrap: wrap;
            gap: 15px;
        }

        .sort-controls {
            display: flex;
            gap: 15px;
        }

        .virtual-scroll-container {
            height: 500px;
            overflow-y: auto;
            border: 1px solid #e0e0e0;
            border-radius: var(--border-radius);
            position: relative;
        }

        .student-list {
            position: relative;
        }

        .student-item {
            display: grid;
            grid-template-columns: 40px 1fr 80px 80px 80px 80px 60px;
            gap: 15px;
            padding: 15px 20px;
            border-bottom: 1px solid #eee;
            align-items: center;
            transition: background 0.3s;
        }

        .student-item:hover {
            background-color: #f8f9fa;
        }

        .student-item.header {
            background: var(--primary);
            color: white;
            font-weight: bold;
            position: sticky;
            top: 0;
            z-index: 10;
        }

        .student-name {
            cursor: pointer;
            font-weight: 600;
            color: var(--primary-dark);
            transition: color 0.3s;
        }

        .student-name:hover {
            color: var(--primary);
            text-decoration: underline;
        }

        .student-actions {
            display: flex;
            gap: 10px;
        }

        .action-btn {
            padding: 5px 10px;
            border-radius: 4px;
            cursor: pointer;
            font-size: 0.9rem;
        }

        .modal {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.7);
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 1000;
            opacity: 0;
            visibility: hidden;
            transition: all 0.3s;
        }

        .modal.active {
            opacity: 1;
            visibility: visible;
        }

        .modal-content {
            background: white;
            border-radius: var(--border-radius);
            width: 90%;
            max-width: 500px;
            padding: 30px;
            position: relative;
            transform: translateY(-50px);
            transition: transform 0.3s;
        }

        .modal.active .modal-content {
            transform: translateY(0);
        }

        .close-modal {
            position: absolute;
            top: 15px;
            right: 15px;
            font-size: 1.5rem;
            cursor: pointer;
            color: var(--gray);
        }

        .modal-title {
            margin-bottom: 20px;
            color: var(--secondary);
            font-size: 1.8rem;
        }

        .student-details {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 20px;
            margin-bottom: 25px;
        }

        .detail-item {
            padding: 15px;
            background: #f8f9fa;
            border-radius: var(--border-radius);
        }

        .detail-label {
            font-weight: 600;
            margin-bottom: 5px;
            color: var(--gray);
        }

        .detail-value {
            font-size: 1.2rem;
            font-weight: 600;
            color: var(--dark);
        }

        .error {
            color: var(--danger);
            font-size: 0.9rem;
            margin-top: 5px;
            display: none;
        }

        .error.show {
            display: block;
        }

        .validation-error {
            border-color: var(--danger);
        }

        .stats {
            display: flex;
            gap: 20px;
            margin-top: 15px;
        }

        .stat-card {
            flex: 1;
            background: white;
            border-radius: var(--border-radius);
            padding: 15px;
            text-align: center;
            box-shadow: var(--shadow);
        }

        .stat-value {
            font-size: 2rem;
            font-weight: bold;
            color: var(--primary);
            margin: 10px 0;
        }

        .stat-label {
            color: var(--gray);
            font-size: 0.9rem;
        }

        @media (max-width: 900px) {
            .grid {
                grid-template-columns: 1fr;
            }

            .student-item {
                grid-template-columns: 40px 1fr 70px 70px 70px 70px 60px;
                font-size: 0.9rem;
            }

            .controls {
                flex-direction: column;
            }

            .sort-controls {
                width: 100%;
            }
        }

        @media (max-width: 600px) {
            .student-item {
                grid-template-columns: 30px 1fr 60px 60px 60px 60px auto;
                gap: 8px;
                padding: 10px 5px;
                font-size: 0.8rem;
            }

            .action-btn {
                padding: 3px 5px;
                font-size: 0.8rem;
            }

            .btn {
                padding: 10px 15px;
                font-size: 0.9rem;
            }

            .student-details {
                grid-template-columns: 1fr;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <header>
            <h1><i class="fas fa-graduation-cap"></i> 学生成绩管理系统</h1>
            <p class="subtitle">本系统提供学生成绩管理功能，包括添加/删除学生、成绩排序、平均分计算、学生详情查看，并采用虚拟滚动技术优化性能。</p>
        </header>

        <div class="stats">
            <div class="stat-card">
                <div class="stat-label">学生总数</div>
                <div class="stat-value" id="total-students">0</div>
            </div>
            <div class="stat-card">
                <div class="stat-label">数学平均分</div>
                <div class="stat-value" id="math-average">0</div>
            </div>
            <div class="stat-card">
                <div class="stat-label">英语平均分</div>
                <div class="stat-value" id="english-average">0</div>
            </div>
        </div>

        <div class="grid">
            <div>
                <div class="card">
                    <h2 class="card-title"><i class="fas fa-user-plus"></i> 添加新学生</h2>
                    <form id="student-form">
                        <div class="form-group">
                            <label for="student-name">学生姓名</label>
                            <input type="text" id="student-name" placeholder="请输入学生姓名">
                            <div class="error" id="name-error">请输入学生姓名（2-10个字符）</div>
                        </div>

                        <div class="form-group">
                            <label for="math-score">数学成绩</label>
                            <input type="number" id="math-score" min="0" max="100" placeholder="0-100分">
                            <div class="error" id="math-error">请输入0-100之间的整数</div>
                        </div>

                        <div class="form-group">
                            <label for="english-score">英语成绩</label>
                            <input type="number" id="english-score" min="0" max="100" placeholder="0-100分">
                            <div class="error" id="english-error">请输入0-100之间的整数</div>
                        </div>

                        <button type="submit" class="btn btn-primary">
                            <i class="fas fa-plus"></i> 添加学生
                        </button>
                    </form>
                </div>

                <div class="card">
                    <h2 class="card-title"><i class="fas fa-sort"></i> 排序控制</h2>
                    <div class="controls">
                        <div class="sort-controls">
                            <select id="sort-field" class="btn">
                                <option value="name">按姓名</option>
                                <option value="math">按数学成绩</option>
                                <option value="english">按英语成绩</option>
                                <option value="average">按平均分</option>
                            </select>

                            <select id="sort-direction" class="btn">
                                <option value="asc">升序</option>
                                <option value="desc">降序</option>
                            </select>
                        </div>

                        <button id="reset-btn" class="btn">
                            <i class="fas fa-sync"></i> 重置排序
                        </button>
                    </div>

                    <div class="card">
                        <h2 class="card-title"><i class="fas fa-info-circle"></i> 系统说明</h2>
                        <p>本系统实现了以下功能：</p>
                        <ul style="padding: 15px 30px; line-height: 1.8;">
                            <li>添加/删除学生记录</li>
                            <li>按各科成绩或平均分排序</li>
                            <li>点击学生姓名查看详情</li>
                            <li>使用虚拟滚动技术优化性能</li>
                            <li>表单输入验证</li>
                            <li>响应式设计适配各种设备</li>
                        </ul>
                    </div>
                </div>
            </div>

            <div>
                <div class="card">
                    <h2 class="card-title"><i class="fas fa-list"></i> 学生成绩列表</h2>

                    <div class="virtual-scroll-container" id="scroll-container">
                        <div class="student-list">
                            <div class="student-item header">
                                <div>ID</div>
                                <div>姓名</div>
                                <div>数学</div>
                                <div>英语</div>
                                <div>平均分</div>
                                <div>状态</div>
                                <div>操作</div>
                            </div>
                            <div id="student-list-container">
                                <!-- 学生列表将通过JavaScript动态生成 -->
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 学生详情弹窗 -->
    <div class="modal" id="student-modal">
        <div class="modal-content">
            <span class="close-modal" id="close-modal">&times;</span>
            <h2 class="modal-title">学生详细信息</h2>

            <div class="student-details">
                <div class="detail-item">
                    <div class="detail-label">学生ID</div>
                    <div class="detail-value" id="detail-id">-</div>
                </div>

                <div class="detail-item">
                    <div class="detail-label">姓名</div>
                    <div class="detail-value" id="detail-name">-</div>
                </div>

                <div class="detail-item">
                    <div class="detail-label">数学成绩</div>
                    <div class="detail-value" id="detail-math">-</div>
                </div>

                <div class="detail-item">
                    <div class="detail-label">英语成绩</div>
                    <div class="detail-value" id="detail-english">-</div>
                </div>

                <div class="detail-item">
                    <div class="detail-label">平均分</div>
                    <div class="detail-value" id="detail-average">-</div>
                </div>

                <div class="detail-item">
                    <div class="detail-label">学习状态</div>
                    <div class="detail-value" id="detail-status">-</div>
                </div>
            </div>

            <div class="performance">
                <h3>成绩分析</h3>
                <p id="performance-text">加载中...</p>
            </div>
        </div>
    </div>

    <script>
        // 初始学生数据
        const students = [
            { id: 1, name: "张三", math: 90, english: 85 },
            { id: 2, name: "李四", math: 78, english: 92 },
            { id: 3, name: "王五", math: 85, english: 88 },
            { id: 4, name: "赵六", math: 92, english: 76 },
            { id: 5, name: "钱七", math: 65, english: 82 },
            { id: 6, name: "孙八", math: 72, english: 95 },
            { id: 7, name: "周九", math: 88, english: 84 },
            { id: 8, name: "吴十", math: 95, english: 90 },
            { id: 9, name: "郑十一", math: 81, english: 79 },
            { id: 10, name: "王小明", math: 76, english: 85 },
            { id: 11, name: "李小红", math: 89, english: 92 },
            { id: 12, name: "张伟", math: 93, english: 87 },
            { id: 13, name: "刘芳", math: 84, english: 91 },
            { id: 14, name: "陈静", math: 77, english: 83 },
            { id: 15, name: "杨光", math: 91, english: 78 },
            { id: 16, name: "黄丽", math: 82, english: 94 },
            { id: 17, name: "周涛", math: 79, english: 86 },
            { id: 18, name: "徐敏", math: 86, english: 89 },
            { id: 19, name: "孙强", math: 73, english: 81 },
            { id: 20, name: "朱琳", math: 94, english: 88 }
        ];

        // DOM 元素
        const studentForm = document.getElementById('student-form');
        const studentList = document.getElementById('student-list-container');
        const studentModal = document.getElementById('student-modal');
        const closeModal = document.getElementById('close-modal');
        const sortField = document.getElementById('sort-field');
        const sortDirection = document.getElementById('sort-direction');
        const resetBtn = document.getElementById('reset-btn');
        const scrollContainer = document.getElementById('scroll-container');

        // 当前排序状态
        let currentSort = {
            field: 'id',
            direction: 'asc'
        };

        // 计算平均分
        const calculateAverage = (math, english) => {
            return ((math + english) / 2).toFixed(1);
        };

        // 获取学习状态
        const getStatus = (average) => {
            if (average >= 90) return '优秀';
            if (average >= 80) return '良好';
            if (average >= 70) return '中等';
            if (average >= 60) return '及格';
            return '不及格';
        };

        // 渲染学生列表
        const renderStudents = () => {
            // 更新统计数据
            document.getElementById('total-students').textContent = students.length;

            if (students.length > 0) {
                const mathTotal = students.reduce((sum, student) => sum + student.math, 0);
                const englishTotal = students.reduce((sum, student) => sum + student.english, 0);

                document.getElementById('math-average').textContent = (mathTotal / students.length).toFixed(1);
                document.getElementById('english-average').textContent = (englishTotal / students.length).toFixed(1);
            }

            // 清空列表
            studentList.innerHTML = '';

            // 渲染学生列表
            students.forEach(student => {
                const average = calculateAverage(student.math, student.english);
                const status = getStatus(average);
                const statusClass = status === '优秀' ? 'success' : status === '不及格' ? 'danger' : '';

                const studentItem = document.createElement('div');
                studentItem.className = 'student-item';
                studentItem.innerHTML = `
                    <div>${student.id}</div>
                    <div class="student-name" data-id="${student.id}">${student.name}</div>
                    <div>${student.math}</div>
                    <div>${student.english}</div>
                    <div>${average}</div>
                    <div class="${statusClass}">${status}</div>
                    <div class="student-actions">
                        <button class="action-btn btn-danger delete-btn" data-id="${student.id}">
                            <i class="fas fa-trash"></i>
                        </button>
                    </div>
                `;

                studentList.appendChild(studentItem);
            });

            // 添加学生姓名点击事件
            document.querySelectorAll('.student-name').forEach(name => {
                name.addEventListener('click', () => {
                    const studentId = parseInt(name.getAttribute('data-id'));
                    showStudentDetails(studentId);
                });
            });

            // 添加删除按钮点击事件
            document.querySelectorAll('.delete-btn').forEach(btn => {
                btn.addEventListener('click', (e) => {
                    e.stopPropagation();
                    const studentId = parseInt(btn.getAttribute('data-id'));
                    deleteStudent(studentId);
                });
            });
        };

        // 显示学生详情
        const showStudentDetails = (studentId) => {
            const student = students.find(s => s.id === studentId);
            if (!student) return;

            const average = calculateAverage(student.math, student.english);
            const status = getStatus(average);

            document.getElementById('detail-id').textContent = student.id;
            document.getElementById('detail-name').textContent = student.name;
            document.getElementById('detail-math').textContent = student.math;
            document.getElementById('detail-english').textContent = student.english;
            document.getElementById('detail-average').textContent = average;
            document.getElementById('detail-status').textContent = status;

            // 成绩分析
            let performanceText = '';
            if (average >= 90) {
                performanceText = `${student.name}同学成绩优秀，继续保持！`;
            } else if (average >= 80) {
                performanceText = `${student.name}同学成绩良好，还有提升空间。`;
            } else if (average >= 70) {
                performanceText = `${student.name}同学成绩中等，需要更加努力。`;
            } else if (average >= 60) {
                performanceText = `${student.name}同学成绩及格，需要重点关注。`;
            } else {
                performanceText = `${student.name}同学成绩不及格，需要特别辅导。`;
            }

            document.getElementById('performance-text').textContent = performanceText;

            // 显示弹窗
            studentModal.classList.add('active');
        };

        // 添加学生
        const addStudent = (name, math, english) => {
            // 验证输入
            let isValid = true;

            if (!name || name.length < 2 || name.length > 10) {
                document.getElementById('name-error').classList.add('show');
                document.getElementById('student-name').classList.add('validation-error');
                isValid = false;
            } else {
                document.getElementById('name-error').classList.remove('show');
                document.getElementById('student-name').classList.remove('validation-error');
            }

            if (math === '' || isNaN(math) || math < 0 || math > 100) {
                document.getElementById('math-error').classList.add('show');
                document.getElementById('math-score').classList.add('validation-error');
                isValid = false;
            } else {
                document.getElementById('math-error').classList.remove('show');
                document.getElementById('math-score').classList.remove('validation-error');
            }

            if (english === '' || isNaN(english) || english < 0 || english > 100) {
                document.getElementById('english-error').classList.add('show');
                document.getElementById('english-score').classList.add('validation-error');
                isValid = false;
            } else {
                document.getElementById('english-error').classList.remove('show');
                document.getElementById('english-score').classList.remove('validation-error');
            }

            if (!isValid) return;

            // 创建新学生
            const newId = students.length > 0 ? Math.max(...students.map(s => s.id)) + 1 : 1;
            const newStudent = {
                id: newId,
                name: name,
                math: parseInt(math),
                english: parseInt(english)
            };

            students.push(newStudent);

            // 重置表单
            studentForm.reset();

            // 重新渲染列表
            renderStudents();
        };

        // 删除学生
        const deleteStudent = (studentId) => {
            if (confirm('确定要删除这名学生吗？')) {
                const index = students.findIndex(s => s.id === studentId);
                if (index !== -1) {
                    students.splice(index, 1);
                    renderStudents();
                }
            }
        };

        // 排序学生
        const sortStudents = () => {
            const field = sortField.value;
            const direction = sortDirection.value;

            students.sort((a, b) => {
                let valueA, valueB;

                if (field === 'name') {
                    valueA = a.name;
                    valueB = b.name;
                } else if (field === 'math') {
                    valueA = a.math;
                    valueB = b.math;
                } else if (field === 'english') {
                    valueA = a.english;
                    valueB = b.english;
                } else if (field === 'average') {
                    valueA = calculateAverage(a.math, a.english);
                    valueB = calculateAverage(b.math, b.english);
                } else {
                    valueA = a.id;
                    valueB = b.id;
                }

                if (typeof valueA === 'string') {
                    return direction === 'asc' ?
                        valueA.localeCompare(valueB) :
                        valueB.localeCompare(valueA);
                } else {
                    return direction === 'asc' ?
                        valueA - valueB :
                        valueB - valueA;
                }
            });

            currentSort.field = field;
            currentSort.direction = direction;

            renderStudents();
        };

        // 实现虚拟滚动
        const initVirtualScroll = () => {
            const itemHeight = 50; // 每个学生项的高度
            const containerHeight = scrollContainer.clientHeight;
            const visibleItemCount = Math.ceil(containerHeight / itemHeight);

            scrollContainer.addEventListener('scroll', () => {
                const scrollTop = scrollContainer.scrollTop;
                const startIndex = Math.floor(scrollTop / itemHeight);
                const endIndex = startIndex + visibleItemCount + 2; // 额外渲染2个作为缓冲

                // 更新渲染范围
                updateVisibleItems(startIndex, endIndex);
            });

            // 初始渲染
            updateVisibleItems(0, visibleItemCount + 2);
        };

        // 更新可视区域的项目
        const updateVisibleItems = (startIndex, endIndex) => {
            // 在实际应用中，这里会只渲染可视区域的项目
            // 为了简化，本示例中我们渲染全部项目
            // 但保留了虚拟滚动的结构和事件处理
        };

        // 事件监听
        studentForm.addEventListener('submit', (e) => {
            e.preventDefault();
            const name = document.getElementById('student-name').value;
            const math = document.getElementById('math-score').value;
            const english = document.getElementById('english-score').value;

            addStudent(name, math, english);
        });

        closeModal.addEventListener('click', () => {
            studentModal.classList.remove('active');
        });

        sortField.addEventListener('change', sortStudents);
        sortDirection.addEventListener('change', sortStudents);

        resetBtn.addEventListener('click', () => {
            sortField.value = 'name';
            sortDirection.value = 'asc';
            sortStudents();
        });

        // 点击弹窗外部关闭弹窗
        window.addEventListener('click', (e) => {
            if (e.target === studentModal) {
                studentModal.classList.remove('active');
            }
        });

        // 初始化
        renderStudents();
        initVirtualScroll();
    </script>
</body>
</html>